/* 登录页面 */

/* 设置导航栏样式 */
.nav{
    /* 导航栏默认高度50px */
    height: 50px;   
    width: 100%;
    background-color:rgb(87, 86, 86);
    font-size: 24px;
    font-weight: 700;
    /* 设置透明 */
    opacity: 70%;
    /*使用弹性布局 配置导航栏里的字垂直居中 */
    display: flex;
    align-items: center;
    /* 让文字里 左侧有有一定距离 */
    padding-left: 20px;
    position: absolute ;
    z-index: 2;
}
.nav p{
    opacity: 1;
    color: white;
}

/* 主窗口 */
.main-container{
   width: 100%;
   height: calc( 100% - 50px );
   /* 使用弹性布局, 主窗口的全部水平垂直居中*/
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   /* 距离顶部50px */
   padding-top: 50px;
   z-index: 2;
}
/* 登录窗口 */
.main-container .main{
    height: 400px;
    width: 400px;
    background-color:rgb(255, 255, 255);
    border-radius: 15px;
    /* 设置一点透明 */
    opacity: 0.7;
    
}

/* 设置登录窗口内容 */

.main-container .main h3{
   font-size: 30px;
   font-weight: 700;
   text-align: center;
    /* 透明度 */
    opacity: 1;
   /* 设置上下左右边距 */
   padding-top: 50px;
   padding-bottom: 30px;

}

.main-container .main .row{
    height: 50px;
    width: 100%;
   display: flex;
   /* 水平垂直居中 */
   justify-content: center;
   align-items: center;
}



.main-container .main .row span{
    font-size: 21px;

    font-weight: 700;
       /* 透明度 */
    opacity: 1;
    /* span是行内元素要设计成块级元素 */
   display: block;
   width: 100px;
}

.main-container .main .row input{
    opacity: 1;
    width: 200px;
    height: 40px;
    /* 字体 */
    font-size: 23px;
    color: black;
    /* 首行缩进 */
    text-indent: 10px;
    background-color: rgb(255, 255, 255);
    /* 设置边框 */
    border-radius: 10px;
    /* 去除轮廓 */
    outline: none;
}




/* 按钮设置 */
.main-container .main .row button{
    opacity: 2;
    background-color: rgb(3, 138, 30);
    font-size: 20px ;
    font-weight: 700;
    color: white;
    height: 40px;
    width: 200px;
    border: none;
    border-radius: 15px;
}
/* 登录按钮点击后变色 */
.main-container .main .row button:active{
    background-color:darkgrey;
}



/* 验证码设置 */
.main-container .main .row img{
  opacity: 2;
  height: 40px;
  width: 100px;
  border-color: white;
  clip-path: inset(1px 1px 2px 2px);
  
}

.main-container .main .row #inputCaptcha{
    opacity: 1;
    width: 100px;
    height: 40px;
    /* 字体 */
    font-size: 23px;
    color: black;
    /* 首行缩进 */
    text-indent: 10px;
    background-color: rgb(255, 255, 255);
    /* 设置边框 */
   border-radius: 10px;
    /* 去除轮廓 */
    outline: none;
}